<template>
  <div class="main">
    <div class="box" :key="index" v-for="(category, index) in goodsList">
      <h1>{{category.name}}好物</h1>
      <div class="content">
        <v-goods :goods="goods" :key="i" v-for="(goods,i) in category.goodsList"></v-goods>
        <div class="last-item item">
          <img mode="aspectFit" src="../../../static/img/rightbig.png">
          <div class="text">
            <p>更多{{category.name}}好物</p>
          </div>
        </div>
      </div>
      <v-split></v-split>
    </div>
  </div>
</template>

<script>
import vSplit from '@/components/split'
import vGoods from '@/components/goods'

export default {
  props: ['goodsList'],
  components: {
    vSplit,
    vGoods
  }
}
</script>

<style lang="less" scoped>
.main{
  width: 100%;
  .box{
    width: 100%;
    background-color: white;
    h1{
      height: 80rpx;
      font-size: 34rpx;
      line-height: 80rpx;
      text-align: center;
    }
    .content{
        width: calc(100% - 10rpx);
        padding: 0 5rpx;
        background-color: #f3f5f7;
      .item{
          width: calc(50% - 40rpx);
          display: inline-block;
          padding: 15rpx;
          margin: 7rpx;
          background-color: white;
          position: relative;
          &:nth-child(1),&:nth-child(1){
            margin-top: 10rpx;
          }
        i{
          width: 80rpx;
          height: 40rpx;
          position: absolute;
          right: 0;
          top: 15rpx;
          color: #b4282d;
        }
        img{
          width: 100%;
          height: 340rpx;
        }
        p{
          height: 50rpx;
          font-size: 28rpx;
          line-height: 50rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow:ellipsis;
        }
        span{
          color: #b4282d;
          display: inline-block;
          height: 30rpx;
          line-height: 30rpx;
          font-size: 30rpx;
          &:last-of-type{
            float: right;
            font-size: 24rpx;
            line-height: 36rpx;
          }
        }
      }
      .last-item{
        text-align: center;
        img{
          width: 67rpx;
          height: 67rpx;
          margin-top: 150rpx
        }
        p{
          height: 203rpx;
          font-size: 30rpx;
        }
      }
    }
  }
}
</style>
